import React from 'react';
import './style/tixian.css';
import Navbar from '../component/Navbar';
import { InputItem, Modal } from 'antd-mobile';

const tabData = [
    { title: 'T+1提现', key: 0 },
    { title: 'T+0提现', key: 1 },
    { title: 'VIP提现', key: 2 },
]



class TiXian extends React.Component {

    state = {
        tabIndex: 0,
        modal2: false,
        txfs: -1,
        money: "",
        title: "",
        modalData: []
    }

    componentDidMount() {
        const modalData = [
            { title: '中国银行（7775）', img: require('./img/tixian/icon1.png'), key: 0 },
            { title: '交通银行', img: require('./img/tixian/icon2.png'), key: 1 },
            { title: '支付宝', img: require('./img/tixian/icon3.png'), key: 2 },
            { title: '微信支付', img: require('./img/tixian/icon4.png'), key: 3 },
        ]
        this.setState({
            modalData
        })
    }
    goBack = () => {
        this.props.history.goBack();
    }
    change(e) {
        console.log(e)
        this.setState({
            money: e.target.value
        })
    }
    // 全部
    jumpAll() {
        this.setState({
            money: 9999
        })
    }
    render() {
        const { tabIndex, title, money } = this.state
        return (
            <div className='tixian'>
                <Navbar onClick={this.goBack} title='提现'></Navbar>
                <div className='scroll'>
                    <div className='tab-bar'>
                        {
                            tabData && tabData.map((v, k) => {
                                return <span
                                    style={{
                                        color: `${this.state.tabIndex === v.key ? '#F98743' : '#999999'}`,
                                        backgroundColor: `${this.state.tabIndex === v.key ? '#FFFFFF' : '#F8F8F8'}`
                                    }}
                                    onClick={() => {
                                        this.setState({
                                            tabIndex: v.key
                                        })
                                    }} key={v + k}>{v.title}</span>
                            })
                        }
                    </div>
                    <div style={{ margin: '0 1.5rem', overflowX: 'hidden' }}>
                        {/* style={{
                            transform: `translateX(-${this.state.tabIndex / 3 * 100}%)`,
                        }} */}
                        <div className='tab' >
                            <div className='first' key='first'>
                                <div className='main'>
                                    <div className='item' style={{ marginTop: '0' }}>
                                        <span className='title'>可提现余额：{tabIndex}</span>
                                        <span className='detaile'>￥6734672.09</span>
                                    </div>
                                    <div className='item' onClick={() => {
                                        this.setState({
                                            modal2: true
                                        })
                                    }}>
                                        <span className='title'>收款账户：</span>
                                        <div className='skzh'>
                                            <span className='detaile'>{title || '673****467787'}</span>
                                            <img alt='' src={require('./img/index/right.png')}></img>
                                        </div>
                                    </div>
                                    <div className='item'>
                                        <span className='title'> 提现金额：</span>
                                        <div style={{ display: 'flex' }}>
                                            {/* <span className='num'>3223.00</span> */}
                                            {/* <InputItem
                                                className='num'
                                                placeholder="输入任意金额"
                                                type='number'
                                                onChange={(e) => this.change(e)}
                                                value={money}
                                                labelNumber={0}
                                                autoAdjustHeight={true}
                                            > </InputItem> */}
                                            <input className='num' value={money} onChange={(e) => this.change(e)} placeholder="输入任意金额"></input>
                                            <span className='qbzc' onClick={() => this.jumpAll()}>全部转出</span>
                                        </div>
                                    </div>
                                    <div className='item'>
                                        <span className='title'>提现费用：</span>
                                        <span className='detaile'>￥50</span>
                                    </div>
                                    <div className='item' style={{ marginTop: '1rem' }}>
                                        <span className='title'>提现密码：</span>
                                        <input style={{ flex: 1, textAlign: "right", border: "none" }} type='number' placeholder='输入6位提现密码'></input>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <span className='sm'>
                        说明：次日提现可免除手续费
                    </span>
                </div>
                <div onClick={() => {
                    this.setState({
                        modal2: true
                    })
                }} className='foot'>
                    <span>确认提现</span>
                </div>
                <Modal
                    popup
                    visible={this.state.modal2}
                    animationType="slide-up"
                >
                    <div className='tixian-modal'>
                        {
                            this.state.modalData && this.state.modalData.map((v, k) => {
                                return (
                                    <div onClick={() => {
                                        this.setState({
                                            txfs: v.key,
                                            title: v.title,
                                            modal2: false
                                        })
                                    }} key={v + k} className='item'>
                                        <div className='left'>
                                            <img alt='' src={v.img}></img>
                                            <span>{v.title}</span>
                                        </div>
                                        <img className='right' src={this.state.txfs === v.key ? require('./img/tixian/xz.png') : require('./img/tixian/wxz.png')} alt=''></img>
                                    </div>
                                )
                            })
                        }
                    </div>
                </Modal>
            </div >
        )
    }
}

export default TiXian;